<template>
  <a-menu
    class="sider-wrapper"
    id="dddddd"
    style="width: 220px"
    v-model:openKeys="openKeys"
    v-model:selectedKeys="selectedKeys"
    mode="inline"
    @click="handleClick"
  >
    <a-sub-menu key="sub1" @titleClick="titleClick">
      <template #title>机房A</template>
      <a-menu-item key="1">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <router-link to="/distributing">
          <span>配电系统</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="2">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <router-link to="/colder">
          <span>制冷系统</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="3">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <router-link to="/environment">
          <span>环境系统</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="4">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <router-link to="/fireAlarm">
          <span>消防系统</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="5">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <router-link to="/mccasonics">
          <span>水浸系统</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="6">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <router-link to="/access">
          <span>门禁系统</span>
        </router-link>
      </a-menu-item>
      <a-menu-item key="7">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <router-link to="/vedio">
          <span>视频系统</span>
        </router-link>
      </a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="sub2">
      <template #title>机房2</template>
      <a-menu-item key="8">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <span>视频系统</span>
      </a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="sub3">
      <template #title>机房3</template>
      <a-menu-item key="9">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <span>视频系统</span>
      </a-menu-item>
    </a-sub-menu>
    <a-sub-menu key="sub4">
      <template #title>机房4</template>
      <a-menu-item key="10">
        <template #icon>
          <AppstoreOutlined />
        </template>
        <span>视频系统</span>
      </a-menu-item>
    </a-sub-menu>
  </a-menu>
</template>
<script lang="ts">
import { defineComponent, ref, watch } from "vue";
import {
  MailOutlined,
  QqOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from "@ant-design/icons-vue";
export default defineComponent({
  setup() {
    const selectedKeys = ref<string[]>(["8"]);
    const openKeys = ref<string[]>(["sub2"]);
    const handleClick = (e: Event) => {
      console.log("click", e);
    };
    const titleClick = (e: Event) => {
      console.log("titleClick", e);
    };
    watch(
      () => openKeys,
      (val) => {
        console.log("openKeys", val);
      }
    );
    return {
      selectedKeys,
      openKeys,

      handleClick,
      titleClick,
    };
  },
  components: {
    MailOutlined,
    QqOutlined,
    AppstoreOutlined,
    SettingOutlined,
  },
});
</script>
<style lang="scss">
$selectedColor: #2af8f6;
$defaultColor: #b2c7ec;
$siderBackground: #10254e;
$siderBorder: 1px solid #2871c0;
$submenuBackground: #142d5a;
$submenuSelectedBackground: #1f5495;
.sider-wrapper {
  height: calc(100vh - 60px);
  overflow-x: hidden;
  overflow-y: auto;
  background: $siderBackground;
  border-right: $siderBorder;
  .ant-menu-submenu {
    color: $defaultColor;
    margin-right: 1px;

    &-arrow {
      left: 20px;
      color: $defaultColor;
    }
    &-title {
      border-bottom: 1px solid #20478b;
      background: $submenuBackground;
      border-left: 2px solid transparent;
      margin: 0;
      .ant-menu-title-content {
        margin-left: 20px;
      }
      &:hover {
        color: $selectedColor;
        .ant-menu-submenu-arrow {
          color: $selectedColor;
        }
      }
    }

    &-selected,
    &:hover {
      color: $selectedColor;
      .ant-menu-submenu-arrow {
        color: $selectedColor;
      }
      .ant-menu-submenu-title {
        background: $submenuSelectedBackground;
        border-bottom: 0;
        border-right: 2px solid #47e4fb !important;
      }
    }
    .ant-menu-sub {
      background: transparent;
      color: $defaultColor;
      a{
        color: $defaultColor;
      }
      .ant-menu-item {
        padding-left: 30px !important;
        width: 70%;
        height: 40px;
        background: url("../../../assets/images/siderDefaultBg.png") no-repeat;
        background-size: 100% 100%;
        margin: 0 auto 10px;
        &:first-child {
          margin-top: 10px;
        }

        &-selected,
        &:hover {
          a {
            color: $selectedColor;
          }
          color: $selectedColor;
          background: url("../../../assets/images/siderSelectdBg.png") no-repeat;
          background-size: 100% 100%;
          &::after {
            border: 0;
          }
        }
      }
    }
  }
}
</style>